<template>
    <div class="login_box">
        <span>在者也注册</span>
        <From :fromData="fromOut" sumbit="注册新用户" @onSumbit="testClick" />
        <router-link to="/login">已经拥有账户了？去登陆</router-link>
    </div>
</template>

<script lang='ts'>
import From, { FromProps } from '../../components/From/index.vue'
import { defineComponent } from 'vue'
import { reqAddUser, TypeResUserData, reqUserLogin } from '../../api/main'
import { useRouter } from 'vue-router'
import { Message } from '../../coustom/Message'
interface inputData {
    nickName: string
    email: string
    password: string
    confimPassword: string
}
export default defineComponent({
    name: 'Login',
    components: { From },
    setup() {
        const router = useRouter()
        const fromOut: FromProps = [
            {
                titel: '昵称',
                valueKey: 'nickName',
                defult: '昵称是账号的一部分',
                rules: [
                    {
                        type: 'required',
                        text: '昵称'
                    }
                ]
            },
            {
                titel: '邮箱',
                valueKey: 'email',
                defult: '请输入邮箱',
                rules: [
                    {
                        type: 'required',
                        text: '邮箱是必填的'
                    },
                    {
                        type: 'mail',
                        text: '请输入正确的邮箱格式'
                    }
                ]
            },
            {
                titel: '密码',
                valueKey: 'password',
                inputType: 'password',
                defult: '请输入密码',
                rules: [
                    {
                        type: 'required',
                        text: '密码是必填的'
                    },
                ],
                custom(value) {
                    if (value.length < 6) return '密码长度过低'
                    return false
                }
            },
            {
                titel: '确认密码',
                inputType: 'password',
                valueKey: 'confimPassword',
                defult: '请输入确认密码',
                rules: [
                    {
                        type: 'required',
                        text: '确认密码是必填的'
                    },
                ],
                affirm: {
                    target: ['password'],
                    text: '确认密码必须和密码是完全一致的'
                }
            }
        ]
        const testClick = async (value: inputData | false) => {
            if (value) {
                try {
                    const { password, email, nickName } = value
                    await reqAddUser({ password, email, nickName });
                    const { data: { token } } = await reqUserLogin({ email, password }) as unknown as TypeResUserData;
                    localStorage.setItem('token', token)
                    Message.success('注册成功，尝试为您自动登录')
                    router.push({
                        path: '/'
                    })
                } catch {
                    Message.error('账号重复，或格式错误')
                }
            }

        }
        return { fromOut, testClick }
    }
})
</script>
<style scoped lang='less'>
.login_box {
    width: 50%;
    min-height: 500px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    span {
        font-size: 25px;
        margin-bottom: 30px;
    }
}
</style>